<!--
  @author:  long
  @date:    2023/5/31
  @file:    xx
  @require:
-->
<template>
  <div>
    <FixedOperation>
      <div class="flex items-center justify-between">
        <span>绩效申诉</span>
        <!-- 内容 -->
        <div class="text-right">
          <el-button type="danger" @click="close">关闭</el-button>
        </div>
      </div>
    </FixedOperation>
    <div class="appealForm app-container">
      <div class="px-20">
        <el-form
          label-width="100"
          :model="form"
          :rules="rules"
          ref="ruleFormRef"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="申诉人：" required>
                {{ appealerNickName }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职务：" required>
                {{ userInfo.job }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="岗位：" required>
                {{ userInfo.position }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门：" required>
                {{ userInfo.deptName }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申诉事件：" prop="appealTitle">
                {{ form.appealTitle }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申诉理由：" prop="appealContent">
                {{ form.appealContent }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件：">
                <div class="text-14px mt-10px" style="width: 100%">
                  <div v-for="item in fileList" :key="item.fileId">
                    <a :href="item.url">{{ item.origFileName }}</a>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="flex items-center justify-between mb-3">
        <TitleName
          title="关联绩效指标"
          icon="i-carbon-bookmark-filled"
        ></TitleName>
      </div>
      <div class="selfAppealList">
        <el-table :data="selectTableData" border>
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            label="一级指标"
            fixed="left"
            prop="firstLevel"
            width="150"
          ></el-table-column>
          <el-table-column
            label="二级指标"
            fixed="left"
            prop="secondLevel"
            width="150"
          ></el-table-column>
          <el-table-column
            label="指标说明及工作内容、工作要求等"
            width="320"
            show-overflow-tooltip
            fixed="left"
            prop="content"
          ></el-table-column>
          <el-table-column label="指标单位" width="100" prop="unit">
          </el-table-column>
          <el-table-column
            label="指标值"
            width="100"
            prop="targetValue"
          ></el-table-column>
          <el-table-column
            label="考核评分标准"
            show-overflow-tooltip
            width="200"
            prop="scoreStandard"
          ></el-table-column>

          <el-table-column
            label="自评完成情况"
            width="130"
            prop="scoreDescriptionSelf"
          >
          </el-table-column>
          <el-table-column label="备注说明" width="130" prop="remark">
          </el-table-column>
          <el-table-column
            label="分值权重"
            width="100"
            prop="score"
            fixed="right"
          ></el-table-column>
          <el-table-column
            label="自评得分"
            align="center"
            fixed="right"
            prop="finalScoreSelf"
            width="80"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="原考核得分"
            align="center"
            width="100"
            prop="finalScore"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="重评得分"
            align="center"
            width="110"
            prop="totalScoreAp"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="examineAppealEdit">
import { getCurrentInstance } from 'vue'
import useUserStore from '@/store/modules/user'
import useTagsViewStore from '@/store/modules/tagsView'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
import { format } from 'date-fns'
import { getUserInfoByUserName } from '@/api/system/user'
import {
  editBizassessappealInfo,
  getBizassessappealAppealinfo,
  saveBizassessappealInfo
} from '@/api/officeManage/appeal'
import { getDept, getListWithRole } from '@/api/system/dept'
import { getNodeData } from '@/api/workflow/process'
const { proxy } = getCurrentInstance()

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const data = reactive({
  queryForm: {
    year: format(new Date(new Date().getTime()), 'yyyy'),
    month: format(new Date(new Date().getTime()), 'MM')
  },
  form: {
    appealTitle: '',
    appealContent: ''
  },
  userInfo: {},
  rules: {
    appealTitle: [
      { required: true, message: '请输入申诉事件', trigger: 'blur' }
    ],
    appealContent: [
      { required: true, message: '请输入申诉理由', trigger: 'blur' }
    ]
  },
  monthNames: [
    { label: '一月', value: '01' },
    { label: '二月', value: '02' },
    { label: '三月', value: '03' },
    { label: '四月', value: '04' },
    { label: '五月', value: '05' },
    { label: '六月', value: '06' },
    { label: '七月', value: '07' },
    { label: '八月', value: '08' },
    { label: '九月', value: '09' },
    { label: '十月', value: '10' },
    { label: '十一月', value: '11' },
    { label: '十二月', value: '12' }
  ],
  fileList: [], // 上传文件列表
  alternateLoading: false
})
const {
  form,
  userInfo,
  rules,
  fileList,
  monthNames,
  queryForm,
  alternateLoading
} = toRefs(data)
const dialogVisible = ref(false) //弹窗开关
const alternateTableData = ref([]) //备选指标
const selectTableData = ref([]) //已选指标
const appealId = ref('') //申诉id
const scoreList = ref([])
const appealerNickName = ref('')
const examineParam = ref({}) //审批弹窗参数
const isExamine = ref(true) //流程是判断是否走审批按钮
const flowOptions = ref([]) //该业务的流程数据
const isHandleScore = ref(false) // 判断是否在重评节点
const isConfirm = ref(false) //申诉人确认阶段

/**
 * 获取申诉信息
 */
const getAppealInfoFn = () => {
  let id = appealId.value
  getBizassessappealAppealinfo(id).then(res => {
    form.value.appealTitle = res.data.appealTitle
    form.value.appealContent = res.data.appealContent
    scoreList.value = res.data.scoreList
    //   考核人进入看到的指标信息与申诉人进入看到的指标信息使用字段不一致
    let arr = res.data.indicatorsList
    if (arr.length > 0) {
      arr.forEach(item => {
        let obj = res.data.appealIndicatorsList.find(
          t => t.indicatorsId == item.id
        )

        item.finalScoreSelf = obj.selfScore
        item.finalScore = obj.totalScore
        item.appraiseeId = obj.appraiseeId
        item.indicatorsId = obj.id
        item.totalScoreAp = obj.totalScoreAp
      })
    }
    selectTableData.value = arr
    console.info('selectTableData.value', selectTableData.value)
    fileList.value = res.data.fileList
    appealerNickName.value = res.data.appealerNickName
    getUserInfo(res.data.appealerUserName)
  })
}

/**
 * 返回
 */
const close = () => {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
}

/**
 * 获取用户信息
 */
const getUserInfo = userName => {
  // userInfo.value = userStore.user
  let userCode = userName || userStore.user.userName

  getUserInfoByUserName(userCode).then(res => {
    userInfo.value = res.data
    let params = {
      deptId: userInfo.value.deptId
    }
    getListWithRole(params).then(response => {
      userInfo.value.deptName = response.data[0].deptName
    })
  })
}

const init = () => {
  appealId.value = router.currentRoute.value.query.appealId
  getAppealInfoFn()
}
init()
</script>

<style scoped lang="scss">
:deep(.monthPopper) {
  width: 300px !important;
}
.monthPopper .el-select-dropdown__item {
  width: 25%;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
}
::v-deep .appealDialog {
  .el-dialog__body {
    padding: 0 20px;
  }
}
</style>
